<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作用域插槽</title>
    <style>
        body {
         background: linear-gradient(270deg, #0E6251, #28B463);
       }
       
       #app {
         display: flex;
       }
       
       .my-list {
         flex: 1 1 50%;
         font-family: Arial;
         color: white;
         margin: 20px;
       }
       .my-list .title {
         background: #A93226;
         padding: 20px;
         font-weight: bold;
         font-size: 22px;
         border-top-left-radius: 4px;
         border-top-right-radius: 4px;
       }
       .my-list .list {
         background: #34495E;
         padding: 20px;
         font-size: 16px;
         border-bottom-left-radius: 4px;
         border-bottom-right-radius: 4px;
       }
       .my-list .list-item:not(:last-child) {
         padding-bottom: 20px;
       }
       
       .swatch {
         display: inline-block;
         width: 15px;
         height: 10px;
         margin-right: 8px;
       }
           </style>
</head>
<body>
    <div id="app">
        <soncom>
            <template slot-scope="scope">
                <slot>苹果:{{scope.hero.nname}}</slot>
            </template>
        </soncom>


        <my-list title="图形列表" :items="shapes">
            <template slot-scope="scope">
                <div>
                    {{scope.it.name}}
                    <small>{{scope.it.sides}}边</small>
                </div>
            </template>
        </my-list>

        <my-list title="颜色列表" :items="colors">
            <template slot-scope="scope">
                <div>
                    <div class="swatch" :style="{background: scope.it.hex}"></div>
                    <small>{{scope.it.name}}</small>
                </div>
            </template>
        </my-list>
       
    </div>

    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <script>

        Vue.component('soncom',{
           data:function(){
                return{ 
                    hero:{
                    nname:'小明',
                    truename:'tome'
                }
                }
            },
            template:`<div>
                <p>作用域插槽</p>
                <slot :hero='hero'></slot>
                </div>`,
            methods:{
            }

        });


        Vue.component('my-list',{
            props:['title','items'],
           data:function(){
                return{
                }
                },
            template:`<div class='my-list'>
                <div class='title'>{{title}}</div>
                <div class='list'>
                    <div class="list-item" v-for="it in items">
                       <slot :it='it'></slot>
                      </div>
                    </div>
                </div>`,
            methods:{
            }

        });


        var vm=new Vue({
            el:'#app',
            data:{
               msg:'appel',
               shapes:[
                {name:'正方形',sides:3},
                {name:'长方形',sides:4},
                {name:'三角形',sides:5},
                {name:'圆形',sides:6}
               ],
               colors:[ // 这里缺少一个逗号，应该在上一行的末尾加上
                {name:'黑色',hex:'black'},
                {name:'红色',hex:'red'},
                {name:'蓝色',hex:'blue'},
                {name:'黄色',hex:'yellow'}
            ]
            }
        })
    </script>
</body>
</html>
